<!-- eslint-disable vue/multi-word-component-names -->
<!-- 详情页面 -->
<template>
    <div v-if="filmInfo">
        <!-- 隐藏头 -->
        <!-- 指令传参 -->
        <detail-header v-scroll="50">
          {{filmInfo.name}}
        </detail-header>
        <!-- 详情海报 -->
        <div :style="{
            backgroundImage:'url('+filmInfo.poster+')'
        }" class="poster"></div>
        <!-- 数据信息 -->
        <div class="content">
            <div class="title">
                <div class="left">{{filmInfo.name}}</div>
                <div class="right"><i>{{filmInfo.grade}}</i><span>分</span></div>
            </div>
            <div class="category">{{filmInfo.category}}</div>
            <div>{{filmInfo.premiereAt | timefilter}} 上映</div>
            <div>{{filmInfo.nation}} | {{filmInfo.runtime}}分钟</div>
            <div class="synopsis" :class="isHidden?'hidden':''">{{filmInfo.synopsis}}</div>
            <div class="align"><i class="iconfont " @click="isHidden=!isHidden"
            :class="isHidden?'icon-moreunfold':'icon-less'"></i></div>
        </div>
        <!-- 演职人员 -->
        <div class="actors">
          <div class="actors-title-text">演职人员</div>
          <detail-swiper class="actors-list" slidesPerView="4" name="actors">
            <detail-swiper-item v-for="(data,index) in filmInfo.actors" :key="index">
              <div class="box">
                <div :style="{
                  backgroundImage:'url('+data.avatarAddress+')'
                }" class="avatarAddress"></div>
                <div class="actorsname">{{data.name}}</div>
                <div class="name">{{data.role}}</div>
              </div>
            </detail-swiper-item>
          </detail-swiper>
        </div>
        <!-- 剧照 -->
        <div class="photos">
          <div class="photos-title">
            <div class="photos-title-1">剧照</div>
            <div class="photos-title-2">全部({{filmInfo.photos.length}})></div>
          </div>
          <div class="photos-img">
            <detail-swiper slidesPerView="2.5" name="photos">
              <detail-swiper-item v-for="(data,index) in filmInfo.photos" class="photosw" :key="index">
                <div :style="{
                  backgroundImage:'url('+data+')'
                }" class="photoswh" @click="handleopen(index)"></div>
              </detail-swiper-item>
            </detail-swiper>
          </div>
        </div>
        <footer @click="chooseTicket(filmInfo.filmId)">选座购票</footer>
    </div>
</template>
<script>
import http from '@/util/http'
import Vue from 'vue'
import moment from 'moment'
import detailSwiper from '@/components/detail/DetailSwiper.vue'
import detailSwiperItem from '@/components/detail/DetailSwiperItem.vue'
import detailHeader from '@/components/detail/DetailHeader.vue'
import { ImagePreview } from 'vant'
import mixin from '@/util/mixinObj'
// 获取时间搓进行变换方式二
Vue.filter('timefilter', date => {
  return moment(date * 1000).format('YYYY-MM-DD')
})
Vue.directive('scroll', {
  inserted (el, binding) {
    // 监听滚动条
    el.style.display = 'none'
    window.onscroll = () => {
      // console.log('scroll')
      if ((document.documentElement.scrollTop || document.body.scrollTop) > binding.value) {
        // console.log('显示隐藏')
        el.style.display = 'block'
      } else {
        // console.log('不显示隐藏')
        el.style.display = 'none'
      }
    }
  },
  // 销毁指令周期
  unbind () {
    window.onscroll = null
  }
})
export default {
  mixins: [mixin],
  data () {
    return {
      filmInfo: null,
      isHidden: true
    //   year: '',
    //   month: '',
    //   date: '',
    //   time: ''
    }
  },

  components: {
    detailSwiper,
    detailSwiperItem,
    detailHeader
  },
  methods: {
    zhankai () {
      this.isHidden = !this.isHidden
    },
    handleopen (index) {
      ImagePreview({
        images: this.filmInfo.photos,
        startPosition: index,
        closeable: true,
        closeIconPosition: 'top-left'
      })
    },
    chooseTicket (id) {
      this.$router.push(`/ticket/${id}`)
    }
  },
  created () {
    // console.log(this.$route.params.myid)
    http({
      url: `/gateway?filmId=${this.$route.params.myid}&k=1829059`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      console.log(res.data.data.film)
      this.filmInfo = res.data.data.film
    //   获取时间方式1
    //   this.year = new Date(this.filmInfo.premiereAt * 1000).getFullYear()
    //   this.month = new Date(this.filmInfo.premiereAt * 1000).getMonth() + 1
    //   this.date = new Date(this.filmInfo.premiereAt * 1000).getDate()
    //   //   console.log(this.year + '-' + this.month + '-' + this.date)
    //   this.time = this.year + '-' + this.month + '-' + this.date
    })
  },
  destroyed () {
    Window.onscroll = null
  }
}
</script>
<style lang="scss" scoped>
.poster{
    width: 100%;
    height: 26.25rem;
    background-position: center;
    background-size: cover;
}
.hidden{
    overflow: hidden;
    height: 3.75rem;
    // line-height: 1.875rem;
}
.content{
    padding:1.85rem 1.9375rem;
    font-size: 1.75rem;
    color: #797d82;
    background: #fff;
    div{
        margin:.5rem 0 0;
    }
    .synopsis{
        margin-top: 1.5rem;
        line-height: 1.875rem;
    }
    .align{
        text-align: center;
        font-size: .75rem;
        margin-top: .25rem;
    }

}
.title{
    font-size: 2.25rem;
    color: #000;
    display: flex;
    justify-content: space-between;
    .left{
        width: 31.375rem;
    }
    .right{
        text-align: right;
        color: #ffb232;
        span{
            font-size: 2rem;
        }
    }
}
// 演职人员
.actors{
  background: #fff;
  margin-top: 1.25rem;
  font-size: 1.5rem;
  .actors-list{
    text-align: center;
    .actorsname{
      padding-top:1.25rem;
      // padding-right: 1.875rem;
    }
    .name{
      color:#797d82;
      font-size: 1.25rem;
    }
  }
}
.box{
    padding:0 1.25rem 1.875rem 1.875rem;
    width:10.625rem;
}
.avatarAddress{
  width: 10.625rem;
  height: 10.625rem;
  background-position: center;
  background-size: cover;
}
.actors-title-text{
  padding:1.875rem;
  font-size: 2rem;
}
// 剧照
.photos{
  margin-top: 1.25rem;
  background: #fff;
  // .photos-img{
  //   margin:0 1.875rem;
  // }
}
.photosw{
  margin:0 0 0 1.875rem;
}
.photoswh{
  width:18.75rem;
  height: 12.5rem;
  background-position: center;
  background-size: cover;

}
.photos-title{
  padding: 1.875rem;
  width: 43.125rem;
  height: 4rem;
    .photos-title-1{
      float: left;
      font-size: 2rem;
    }
    .photos-title-2{
      float: right;
      font-size: 1.625rem;
    }
}
footer{
   font-size: 2rem;
   position:fixed;
   bottom:0;
   left:0;
   background: #ff5f16;
   color: #fff;
   width:100%;
   height:5.875rem;
   text-align: center;
   line-height: 5.875rem;
   z-index: 100;
}
</style>
